<template>
  <div class="app-page-scroll">
    <t-card header="基础用法">
      <div class="cpm-separator">Number：:value="10248654"</div>
      <lg-format :value="10248654"></lg-format>

      <div class="cpm-separator">Date：:value="date"</div>
      <lg-format :value="date"></lg-format>

      <div class="cpm-separator">String：:value="str"</div>
      <lg-format :value="str"></lg-format>
    </t-card>

    <t-card header="定义格式">
      <div class="cpm-separator">百分比：format="percent"</div>
      <lg-format :value="0.87" format="percent"></lg-format>

      <div class="cpm-separator">文件大小：format="file"</div>
      <lg-format :value="10248654" format="file"></lg-format>

      <div class="cpm-separator">大数：format="bigint"</div>
      <lg-format :value="10248654" format="bigint"></lg-format>

      <div class="cpm-separator">人民币：format="CNY"</div>
      <lg-format :value="10248654" format="CNY"></lg-format>

      <div class="cpm-separator">美元：format="USD"</div>
      <lg-format :value="10248654" format="USD"></lg-format>

      <div class="cpm-separator">欧元：format="EUR"</div>
      <lg-format :value="10248654" format="USD"></lg-format>

      <div class="cpm-separator">日期时间：format="datetime"</div>
      <lg-format :value="date" format="datetime"></lg-format>

      <div class="cpm-separator">日期：format="date"</div>
      <lg-format :value="str" format="date"></lg-format>

      <div class="cpm-separator">时间：format="time"</div>
      <lg-format :value="date.getTime()" format="time"></lg-format>

      <div class="cpm-separator">自定义日期格式：format="YYYY年MM月DD日"</div>
      <lg-format :value="date.getTime()" format="YYYY年MM月DD日"></lg-format>

      <div class="cpm-separator">自定义数值格式：:format="5"</div>
      <lg-format :value="10.248654" :format="5"></lg-format>
    </t-card>

    <!---------------------------------   api说明文档      -------------------------------------------->
    <t-card header="属性">
      <t-base-table :columns="propColumns" :data="propsData" style="width: 100%" />
    </t-card>
    <t-card header="事件">
      <t-base-table :columns="emitColumns" :data="emitData" style="width: 100%" />
    </t-card>
    <t-card header="插槽">
      <t-base-table :columns="slotColumns" :data="slotData" style="width: 100%" />
    </t-card>
    <t-card header="api">
      <t-base-table :columns="apiColumns" :data="apiData" style="width: 100%" />
    </t-card>
  </div>
</template>
<script lang="ts" setup>
import './index.less';
import { dateFormat, LgFormat } from '@/soar';
import { apiColumns, emitColumns, propColumns, slotColumns } from './index';

const date = new Date();
const str = dateFormat(date);

const propsData = [
  { name: 'value', desc: '数据值', type: 'any', def: '' },
  {
    name: 'format',
    desc: '显示格式',
    type: "'bigint' | 'number' | 'datetime' | 'date' | 'time' | 'CNY' | 'USD' | 'EUR' | 'file' | 'percent' | string | number",
    def: '',
  },
];

const emitData = [
  // { name: 'stop', desc: '倒计时结束时触发', param: '' }
];

const apiData = [
  // { name: 'code', desc: '字典code', type: 'string', sample: '' },
];

const slotData = [
  // { name: 'default', desc: '默认，自由渲染', scope: 'd, h, m, s, count, text, hh, mm, ss, stopped' }
];
</script>
